<template>
  <view class="search-container">
    <view class="search-box" @click="gotoSearch">
      <view class="search-box-item" v-for="(item,i) in commonList" :key="i" @click="deleteStyle(item)">
        {{item.name}} X
      </view>
    </view>
    <view class="search-car">
      <uni-icons type="cart-filled" size="30" color="#D5DDE5" @click="goShoppingCar"></uni-icons>
    </view>
  </view>
</template>

<script>
  export default {
    name: "search",
    data() {
      return {};
    },
    props: {
      commonList: Array
    },
    methods: {
      // 首页点击购物车事件
      goShoppingCar() {
        if (uni.getStorageSync('token') == '') return uni.$showMsg('未登录，请登录')
        uni.redirectTo({
          url: '/subpkg/buyCar/buyCar'
        })
      },
      gotoSearch() {
        this.$emit('click')
      },
      // 删除风格分类项
      deleteStyle(item) {
        this.$emit("deleteStyleItem", item)

      }
    }

  }
</script>

<style lang="scss">
  .search-container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 20rpx;

    .search-car {
      width: 30%;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .search-box {
      width: 70%;
      height: 36px;
      border: 1px solid #B8C1CC;
      border-radius: 18px;
      width: 100%;
      display: flex;
      padding-left: 20rpx;
      align-items: center;

      .search-box-item {
        margin-right: 16rpx;
        text-align: center;
        font-size: 11px;
        color: #FFFFFF;
        height: 55rpx;
        line-height: 55rpx;
        background-color: #D5DDE5;
        border-radius: 12px;
        padding: 0 8rpx;
      }
    }
  }
</style>